<template>
	<div>

		<el-form :model="info" :rules="data.rules" :label-width="language == 'en' ? '160' : '100px'" ref="ruleFormRef">

			<el-form-item :label="$t('goods.types.name') + ':'" prop="gc_name">
				<el-input v-model="info.gc_name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('goods.types.sort') + ':'" prop="sort">
				<el-input v-model.number="info.sort" type="text" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('goods.types.iconClass') + ':'" prop="ico">
				<el-input v-model="info.ico" type="text" readonly>
					<template #append>
						<Upload :list="{ 'data': 'ico', 'list': false }" :type="1" :uptype="2" @exposeData="expose" />
					</template>
				</el-input>
			</el-form-item>

			<el-form-item :label="$t('goods.types.statusClass') + ':'" prop="status">
				<el-select v-model="info.status" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.enable')" :value="1" />
					<el-option :label="$t('public.disable')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('goods.types.desc') + ':'" prop="desc">
				<el-input v-model="info.desc" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">

					<el-button type="primary" size="small" @click="submit(ruleFormRef)">
						{{ $t('public.save') }}
					</el-button>

					<el-button size="small" @click="cancell">
						{{ $t('public.cancel') }}
					</el-button>

				</div>
			</div>

		</el-form>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
let emit = defineEmits(['edit']);

let props = defineProps({
	info: {
		// 选中的分类
		type: Object,
		default: {}
	},
})

let data = reactive({
	rules: { // 表单验证
		gc_name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		sort: [
			{ required: true, message: $t('message.pleaseEnter') },
			{ type: 'number', message: $t('message.pleaseNumber') }
		]
	},
})

// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		props.info.ico = e.file.response.data
	} else {
		props.info.ico = ''
	}
}

// 数据提交
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			emit('edit', props.info);
		}
	})

}

// 取消
let cancell = () => {
	emit('edit', false);
}

</script>
